<template>
  <div class="el-three-list">
    <el-row :gutter="10" :style="{ width: '100%' }">
      <el-col :span="8" v-for="item in tableData" :key="item.newsId">
        <div class="three-item hover2" @click="handDetails(item.newsId, item)">
          <el-image
            class="three-img"
            :src="item._titleImg"
            fit="cover"
          ></el-image>
          <div class="three-title">{{ item.title }}</div>
        </div>
      </el-col>
    </el-row>
  </div>
</template>
<script>
export default {
  props: {
    tableData: {
      type: Array,
    },
    name: {
      type: String,
      default: "大赛详情-标题.png", //标题图标的文件名字
    },
    type: {
      type: Number,
      default: 1, //大标题 2中标题 3小标题
    },
  },
  data() {
    return {};
  },
  methods: {
    handDetails(id, item) {
      this.$emit("handDetails", id, item);
    },
  },
};
</script>
<style scoped lang="less">
.el-three-list {
  .w100;
  .flex-row;
  flex-wrap: wrap;
  .three-item {
    height: 266px;
    background: #ffffff;
    box-shadow: 0 0 18px 0 rgba(18, 27, 83, 0.07);
    margin-right: 20px;
    margin-bottom: 40px;
    border-radius: 6px;
    .three-img {
      width: 100%;
      height: 195px;
      border-radius: 6px 6px 0 0;
    }
    .three-title {
      color: #333;
      font-size: 18px;
      overflow: hidden;
      font-weight: bold;
      white-space: nowrap;
      text-overflow: ellipsis;
      width: 347px;
      margin: 20px auto;
      margin-top: 16px;
    }
  }
}
</style>
